<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 实现功能：在div2中显示鼠标在div1移动时的x和y的坐标
        window.onload = function(){
            var div1 = document.getElementsByClassName("div1")[0];
            var div2 = document.getElementsByClassName("div2")[0];
            // 绑定鼠标移动响应事件
            // 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参，里面封装了当前事件的信息
            // 例如：鼠标的坐标，鼠标滚轮滚动的方向，键盘哪个按键被按下
            div1.onmousemove = function(event){
                // clientX可以获取鼠标的水平坐标
                var x = event.clientX;
                var y = event.clientY;
                div2.innerHTML = "x = "+x+", y = "+y;
            }
        }
    </script>
    <style>
        .div1{
            width: 200px;
            height: 100px;
            border: 2px solid skyblue;
            margin-bottom: 100px;
        }
        .div2{
            width: 200px;
            height: 20px;
            border: 2px solid orange;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>